/**
 * Created by imac13 on 19/1/5.
 */
import React,{ Component } from 'react';
import { Card,Button,Modal } from 'antd';
import './../ui.less'

class Modals extends Component {
    state = {
        modal1: false,
        modal2: false,
        modal3: false,
        modal4: false,
    };
    showModal = (type) => {
        this.setState({
            [type]: true,
        });
    };

    handleOk = (type) => {
        this.setState({
            [type]: false,
        });
    };

    handleCancel = (type) => {
        this.setState({
            [type]: false,
        });
    };
    showConfirm = (type) => {
        Modal[type]({
            title: '确认?',
            content: '你确定你学会了react吗？',
            onOk() {
                return new Promise((resolve, reject) => {
                    setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                }).catch(() => console.log('Oops errors!'));
            },
            onCancel() {},
        })
    };
    render(){
        return(
            <div>
                <Card title="基础模态框" className="card-wrapper">
                    <Button type="primary" onClick={()=>this.showModal('modal1')}>Open</Button>
                    <Button type="primary" onClick={()=>this.showModal('modal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={()=>this.showModal('modal3')}>顶部20px弹框</Button>
                    <Button type="primary" onClick={()=>this.showModal('modal4')}>水平垂直居中</Button>
                </Card>
                <Card title="信息确认框" className="card-wrapper">
                    <Button type="primary" onClick={()=>this.showConfirm('confirm')}>Confirm</Button>
                    <Button type="primary" onClick={()=>this.showConfirm('info')}>Info</Button>
                    <Button type="primary" onClick={()=>this.showConfirm('success')}>Success</Button>
                    <Button type="primary" onClick={()=>this.showConfirm('warning')}>Warning</Button>
                    <Button type="primary" onClick={()=>this.showConfirm('error')}>Error</Button>
                </Card>
                <Modal
                    title="React课程"
                    visible={this.state.modal1}
                    onOk={()=>this.handleOk('modal1')}
                    onCancel={()=>this.handleCancel('modal1')}
                >
                    <p>Some contents...</p>
                </Modal>
                <Modal
                    title="React课程"
                    okText="好的"
                    cancelText="算了"
                    visible={this.state.modal2}
                    onOk={()=>this.handleOk('modal2')}
                    onCancel={()=>this.handleCancel('modal2')}
                >
                    <p>Some contents...</p>
                </Modal>
                <Modal
                    title="React课程"
                    style={{ top: 20 }}
                    visible={this.state.modal3}
                    onOk={()=>this.handleOk('modal3')}
                    onCancel={()=>this.handleCancel('modal3')}
                >
                    <p>Some contents...</p>
                </Modal>
                <Modal
                    title="React课程"
                    centered
                    visible={this.state.modal4}
                    onOk={()=>this.handleOk('modal4')}
                    onCancel={()=>this.handleCancel('modal4')}
                >
                    <p>Some contents...</p>
                </Modal>
            </div>
        )
    }
}

export default Modals;